<!--  -->
<template>
  <div class="box">
    <div class="header">
      状态：
      <el-dropdown @command="clickList">
        <span class="el-dropdown-link">
          {{ classify }}<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="全部">
            全部
          </el-dropdown-item>
          <el-dropdown-item command="显示">
            显示
          </el-dropdown-item>
          <el-dropdown-item command="不显示">
            不显示
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      名称：<input
        v-model="message"
        type="text"
      >
      <el-button
        type="info"
        size="mini"
        icon="el-icon-search"
        @click="searchValueList"
      />

      <div>
        <template>
          <el-button
            type="text"
            @click="dislog()"
          >
            新增分类
          </el-button>
        </template>
        <el-dialog
          :visible.sync="dialogVisible"
          width="45%"
        >
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <h3>新增分类</h3>
            <el-form-item
              label="分类名称"
              prop="classifyName"
            >
              <el-input
                v-model="ruleForm.classifyName"
                placeholder="分类名称"
              />
            </el-form-item>
            <div class="desclist">
              <el-form-item
                label="父级"
                prop="classify"
              >
                <el-input
                  v-model="ruleForm.classify"
                  placeholder="父级"
                />
              </el-form-item>
              <span
                slot="footer"
                class="dialog-footer"
              >
                <el-button
                  type="primary"
                  @click="compireAdd('ruleForm')"
                >确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
              </span>
            </div>
          </el-form>
        </el-dialog>
      </div>
    </div>
    <div class="main">
      <el-table
        :data="newTableData ? newTableData : tableData"
        style="width: 100%"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          prop="classifyName"
          sortable
          label="名称"
          width="180"
        >
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
            >{{ scope.row.classifyName }}|123</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          label="类型"
          width="180"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.classify }}</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          label="mone"
          width="80"
        >
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
            >{{ scope.row.classifyIcon }}icon</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          label="排序"
          width="50"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.classifySort }}1</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          label="状态"
          width="80"
        >
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
            ><el-tooltip
              :content="'Switch value: ' + scope.row.classifyState"
              placement="top"
            >
              <el-switch
                v-model="scope.row.classifyState"
                active-color="#0066ff"
                inactive-color="#ccc"
                :active-value="true"
                :inactive-value="false"
              /> </el-tooltip></span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="250"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="dislog()"
            >
              添加项
            </el-button><el-button
              size="mini"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :current-page="pageIndex"
      :total="total"
      @current-change="changePage"
    />
  </div>
</template>

<script>
import {getDirectiveList} from '../../api/comment'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      rules: {
        name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 1, max: 10, message: "最多10个字符", trigger: "blur" },
        ],
      },
      ruleForm: {
        id: Math.round(Math.random() * 100),
        stateflag: false,
        classifyName: "",
        classifyNameSeach: "",
        classify: "",
        classifyIcon: "",
        classifySort: "",
        classifyState: false,
      },
      indexList:"",
      dialogVisible: false,
      pageSize: 5,
      pageIndex: 0,
      flag: true,
      classify: "全部",
      message: "",
      total: 0,
      tableData: [],
      newTableData: "",
      dialogFlag: false,
      classifyFrom: {
        classifyName: "",
        classify: "",
      },
    };
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    commitedKeywod() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.changePage(this.pageIndex, this.pageSize);
      }, 700);
    },
    shop_input(){
      clearTimeout(this.timer);
      this.timer= setTimeout(()=>{
        this.changePage(this.pageIndex, this.pageSize)
      },700)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    getDirectiveList({
      pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyword: this.commitedKeywod,
          shopInput: this.shop_input,
          }).then((res) => {
          if (res.code === 20000) {
            this.tableData = res.data;
            this.total = res.total;
          }
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    changePage(ind) {
      this.pageIndex = ind;
        getDirectiveList({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyword: this.commitedKeywod,
          shopInput: this.shop_input,
          }).then((res) => {
          if (res.code === 20000) {
            this.tableData = res.data;
            this.total = res.total;
          }
        });
    },
    dislog() {
      this.dialogVisible = true;
      this.typeAddList = "rowA";
    },
    
    compireAdd(ruleForm) {
      console.log(ruleForm);
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
          if (this.typeAddList === "rowA") {
            this.tableData.push(this.ruleForm);
          } else if (this.typeAddList === "rowB") {
            this.tableData.forEach((item) => {
              if (item.id === this.indexList) {
                item.classifyName = this.ruleForm.classifyName;
                item.classify = this.ruleForm.classify;
              }
            });
          }
          this.ruleForm = {
            name: "",
            region: "",
            style: "",
            id: Math.round(Math.random() * 100),
          };
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    searchValueList() {
      let str = ["", ...this.message, ""].join(".*"); //转化成正则格式的字符串
      let reg = new RegExp(str); //正则
      this.newTableData = this.tableData.filter((item) => {
        // this.newTableData = item.children.filter(item1=>{
        //   if(reg.test(item1.classifyName)){
        //     console.log(11);
        //     return item
        //   }
        // })
        if (reg.test(item.classifyName)) {
          return item;
        }
      });
      console.log(this.newTableData);
      //去匹配待查询的字符串
    },
    clickList(command) {
      this.classify = command;
    },
    handleEdit(row) {
      this.dialogVisible = true;
      this.typeAddList = "rowB";
      this.indexList = row.id;
      this.ruleForm = { ...row };
    },
    handleDelete(row) {
       this.tableData.forEach((item,index) => {
        if(item.id === row.id){
            this.tableData.splice(index,1)
        }
        if(item.children){
           item.children.forEach((item1,index1)=>{
            if(item1.id === row.id){
                item.children.splice(index1,1)
            }
        })
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  padding: 20px;
  height: 100vh;
}
.main {
  text-align: center !important;
  color: #ccc;
  height: 65vh;
  overflow: auto;
}
</style>
